document.addEventListener('DOMContentLoaded', function() {
    // 分类筛选功能
    const filterButtons = document.querySelectorAll('.filter-btn');
    const attractionCards = document.querySelectorAll('.attraction-card');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 更新按钮活动状态
            filterButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            
            const category = button.dataset.category;
            
            // 筛选卡片
            attractionCards.forEach(card => {
                if (category === 'all' || card.dataset.category === category) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
    
    // 查看详情按钮功能
    const detailButtons = document.querySelectorAll('.details-btn');
    
    detailButtons.forEach(button => {
        button.addEventListener('click', function() {
            const card = this.closest('.attraction-card');
            const title = card.querySelector('h2').textContent;
            
            // 这里可以替换为实际跳转逻辑或模态框
            alert(`即将显示 ${title} 的详细信息页面`);
            // window.location.href = `detail.html?attraction=${encodeURIComponent(title)}`;
        });
    });
    
    // 图片懒加载
    if ('IntersectionObserver' in window) {
        const lazyImages = document.querySelectorAll('img[loading="lazy"]');
        
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    // 实际应用中这里应该加载真实src
                    // 例如：img.src = img.dataset.src;
                    imageObserver.unobserve(img);
                }
            });
        });
        
        lazyImages.forEach(img => imageObserver.observe(img));
    }
});